<template>
  <div class="about">
    <h1>一下都是父组件展示的内容</h1>
    <!-- 用子 -->
    <HelloKitty :total="total" :indexPage="indexPage"/>
    <ComA :mytype="mytype" :value="value"> </ComA>
    <hr>
    父组件:
    <!-- 父组件 双向绑定了 fomdel -->
    <input v-model="fmodle"/>
    fmodle:{{fmodle}}
    <hr>
    <h2>一下内容是子组件在父组件的展示</h2>
    <!-- 自组件，单向绑定fmodel 一旦fmodle的值发生变化,传入子组件的值也会发生变化 -->
    <myInput :vModel="fmodle"/>
  </div>
</template>

<script>
// 声子
import HelloKitty from '@/components/HelloKitty.vue'
import ComA from '@/components/ComA.vue'
import myInput from '@/components/myInput.vue'
export default {
  //挂子
  components: {

    //HelloKitty等同于 HelloKitty(自定义组件的名称):HelloKitty(import导入时指定的名称)
    HelloKitty,ComA,myInput
  },
  data () {
    return {
      total:30,
      indexPage:2,
      msg:"",
      mytype:"text",
      value:"zss",
      fmodle:""
    }
  }
}
</script>
